<template>
  <div class="bar" v-show="apiType">
    <template>
      <div class="title">
        {{ counts ? `共检索到 ${counts} 条相关内容` : '请在右侧检索内容'}}
      </div>
      <div class="tool">
        <input type="text" :placeholder="$site.searchHolder" :value="msg" @change="msgChange($event)" @keyup.enter="operator">
        <a class="go" @click="operator"></a>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  data () {
    return {
      msg: '交通'
    }
  },
  watch: {
    msgFromStore (val) {
      this.msg = val
    }
  },
  methods: {
    msgChange ($event) {
      this.$store.commit('updateSearchBar', $event.target.value)
    },
    operator () {
      this.$store.dispatch('seachFromBar')
    }
  },
  computed: {
    counts () { return this.$store.state[this.model].counts },
    msgFromStore () { return this.$store.state.searchBar[this.model] },
    model () { return this.$store.state.model },
    apiType () {
      return this.$site.searchConfig[this.model]
    }
  }
}
</script>
